<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card class="search-card">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        class="formBox"
        label-width="90px"
      >
        <el-form-item label="姓名" prop="studentName">
          <el-input
            placeholder="请输入姓名"
            class="width_100"
            v-model="queryParams.studentName"
          />
        </el-form-item>
        <el-form-item label="身份证号" prop="idNumber">
          <el-input
            placeholder="请输入身份证号"
            class="width_100"
            v-model="queryParams.idNumber"
          />
        </el-form-item>
        <el-form-item label="学院" prop="collegeId">
          <el-select
            v-model="queryParams.collegeId"
            placeholder="请选择学院"
           
            style="width: 100%"
            @change="getCollegeModeListFun"
          >
            <el-option
              v-for="(item, index) in getSchoolCollegeListData"
              :label="item.collegeName"
              :value="item.id"
              :key="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="模式" prop="modelId">
          <el-select
            v-model="queryParams.modelId"
            placeholder="请选择模式"
           
            style="width: 100%"
            @change="getCollegeMajorListFun"
          >
            <el-option
              v-for="(item, index) in getCollegeModeListData"
              :label="item.modelName"
              :value="item.id"
              :key="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="专业名称" prop="majorId">
          <el-select
            v-model="queryParams.majorId"
            placeholder="请选择专业名称"
           
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in getCollegeMajorListData"
              :label="item.majorName"
              :value="item.id"
              :key="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="年级" prop="gradeId">
          <el-select
            v-model="queryParams.gradeId"
            placeholder="请选择年级"
           
          >
            <el-option
              v-for="(item, index) in getSchoolGradeListData"
              :key="index"
              :label="item.grade"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="缴费学年" prop="feeYearId">
          <el-select
            v-model="queryParams.feeYearId"
            placeholder="请选择收费学年"
           
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in getSchoolFeeYearListData"
              :label="item.feeYear"
              :value="item.id"
              :key="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否退款" prop="refundedStatus">
          <el-select
            v-model="queryParams.refundedStatus"
            placeholder="请选择是否退款"
           
          >
            <el-option label="是" value="1" />
            <el-option label="否" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="学生状态" prop="graduate">
          <el-select
            v-model="queryParams.graduate"
            placeholder="请选择学生状态"
           
            style="width: 100%"
          >
            <el-option value="0" label="未入学" />
            <el-option value="1" label="在校" />
            <el-option value="2" label="休学" />
            <el-option value="3" label="请假" />
            <el-option value="4" label="退学" />
            <el-option value="5" label="毕业" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="支付方式" prop="payMethod">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择支付方式"
           
          >
            <el-option label="男" value="1" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="支付时间">
          <el-date-picker
            v-model="date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >
            搜索
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 按钮 -->
    <el-card class="box-card" style="margin-top: 10px">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="handleExport(1)"
            v-hasPermi="['finance:payDetails:chargeDetail:export']"
            >导出
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="handleExport(2)"
            v-hasPermi="['finance:payDetails:chargeDetail:detailExport']"
            >支付明细导出
          </el-button>
        </el-col>

        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
    </el-card>
    <!-- 列表 -->
    <el-card class="table-card" style="margin-top: 10px">
      <el-table
        :data="dataList"
        @selection-change="handleSelectionChange"
        row-key="id"
        size="mini"
        stripe
        border
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="专业" prop="majorName" />
        <el-table-column label="年级" prop="gradeName" />
        <el-table-column label="姓名" prop="studentName" />
        <el-table-column label="身份证号" prop="idNumber" width="140" />
        <el-table-column label="在校状态" prop="graduate" />
        <el-table-column label="缴费学年" prop="feeYear" width="120" />
        <el-table-column label="支付金额（元）" prop="paidAmount" width="120" />
        <el-table-column label="支付方式" prop="payMethodName" />
        <el-table-column label="支付时间" prop="createTime" width="140" />
        <el-table-column label="是否退款" prop="refundedStatus">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.refundedStatus == '1'">是</el-tag>
            <el-tag type="danger" v-if="scope.row.refundedStatus == '2'">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="退款金额" prop="refundedAmount" />
        <el-table-column label="退款时间" prop="refundedTime" width="140" />
        <el-table-column label="操作人" prop="createBy" />
        <el-table-column label="操作" width="220" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="buttonMethod(1, scope.row)"
              v-hasPermi="['educational:mode:edit']"
            >
              收费明细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="huizhong">汇总：支付总金额：【{{ totalAmount }}】元</div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-dialog :title="title" :visible.sync="status" width="60%">
      <el-table :data="detailList" style="width: 100%">
        <el-table-column prop="feeYear" label="缴费学年" />
        <el-table-column prop="feeItemConfigName" label="项目" />
        <el-table-column prop="totalAmount" label="账单金额" />
        <el-table-column prop="prepaymentDeducted" label="预交费" />
        <el-table-column prop="paidAmount" label="支付金额" />
        <el-table-column prop="payMethodName" label="支付方式" />
        <el-table-column prop="pay_status" label="支付状态" />
        <el-table-column prop="createTime" label="支付时间" />
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import {
  getSchoolFeeYearList,
  getSchoolCollegeList,
  getCollegeMajorList,
  getCollegeModeList,
  getSchoolGradeList,
} from "@/api/educational";
import {
  payStudentFeePaymentList,
  sumTotalAmount,
  payStudentFeePaymentDetail,
} from "@/api/finance/index";
export default {
  name: "",
  data() {
    return {
      status: false,
      title: "",
      dataList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        studentName: null,
        idNumber: null,
        collegeId: null,
        modelId: null,
        majorId: null,
        gradeId: null,
        feeYearId:null,
        refundedStatus:null,
        payMethod: null,
        paymentStartTime: null,
        paymentEndTime: null,
      },
      queryForm: {},
      total: 0,
      showSearch: true,
      date: [],
      ids: [],
      getSchoolFeeYearListData: [], //收费年度管理接口 查询收费年度信息列表（不分页）
      getSchoolCollegeListData: [], //学院信息管理接口 查询学院信息列表（不分页）
      getCollegeModeListData: [], //学院模式管理接口 查询模式信息列表（不分页）
      getCollegeMajorListData: [], //专业管理接口 查询专业信息列表（不分页）
      getSchoolGradeListData: [], //学校年级管理接口 查询学校年级信息列表（不分页）
      activeName: "1",
      totalAmount: "",
      detailList: [],
    };
  },
  created() {
    this.getSchoolFeeYearListFun(); //收费年度管理接口 查询收费年度信息列表（不分页）
    this.getSchoolCollegeListFun(); //学院信息管理接口 查询学院信息列表（不分页）
    this.getSchoolGradeListFun(); //学校年级管理接口 查询学校年级信息列表（不分页）
    this.sumTotalAmountFun();
    this.getList();
  },
  methods: {
    sumTotalAmountFun() {
      var that = this;
      sumTotalAmount().then((res) => {
        if (res.code == 200) {
          that.totalAmount = res.data.totalAmount;
        }
      });
    },
    //收费年度管理接口 查询收费年度信息列表（不分页）
    getSchoolFeeYearListFun() {
      getSchoolFeeYearList().then((res) => {
        if (res.code == 200) {
          this.getSchoolFeeYearListData = res.data;
        }
      });
    },
    // 学院信息管理接口 查询学院信息列表（不分页）
    getSchoolCollegeListFun() {
      getSchoolCollegeList().then((res) => {
        if (res.code == 200) {
          this.getSchoolCollegeListData = res.data;
        }
      });
    },
    // 学院模式管理接口 查询模式信息列表（不分页）
    getCollegeModeListFun(options, status) {
      if (!status) {
        this.$set(this.queryParams, "modelId", "");
        this.$set(this.queryForm, "modelId", "");
        this.$set(this.queryParams, "majorId", "");
        this.$set(this.queryForm, "majorId", "");
      }
      getCollegeModeList({
        collegeId: options,
      }).then((res) => {
        if (res.code == 200) {
          this.getCollegeModeListData = res.data;
        }
      });
    },
    // 专业管理接口 查询专业信息列表（不分页）
    getCollegeMajorListFun(options, status) {
      if (!status) {
        this.$set(this.queryParams, "majorId", "");
        this.$set(this.queryForm, "majorId", "");
      }
      getCollegeMajorList({
        modelId: options,
      }).then((res) => {
        if (res.code == 200) {
          this.getCollegeMajorListData = res.data;
        }
      });
    },
    // 学校年级管理接口 查询学校年级信息列表（不分页）
    getSchoolGradeListFun() {
      getSchoolGradeList().then((res) => {
        if (res.code == 200) {
          this.getSchoolGradeListData = res.data;
        }
      });
    },
    // 获取列表数据
    getList() {
      var that = this;
      var data = this.queryParams;
      if (this.date.length > 0) {
        data.paymentStartTime = this.date[0];
        data.paymentEndTime = this.date[1];
      }
      payStudentFeePaymentList(data).then((res) => {
        if (res.code == 200) {
          that.dataList = res.rows;
          that.total = res.total;
        }
      });
    },
    handleClick() {
      console.log(this.activeName);
    },
    /**
     * 按钮点击事件处理方法
     */
    buttonMethod(options, value) {
      var that = this;
      //options 等于 1
      if (options == 1) {
        this.title = "收费明细";
        this.status = true;
          payStudentFeePaymentDetail(value.id).then((res) => {
            if (res.code == 200) {
              var detailList = res.data;
              var arrList = [];
              for (var i = 0; i < detailList.details.length; i++) {
                var list = detailList.details[i];
                var pay_status = "";
                if (list.payStatus == "10") {
                  pay_status = "待支付";
                } else if (list.payStatus == "20") {
                  pay_status = "支付中";
                } else if (list.payStatus == "30") {
                  pay_status = "支付成功";
                } else if (list.payStatus == "40") {
                  pay_status = "支付失败";
                } else if (list.payStatus == "50") {
                  pay_status = "已退款";
                }
                arrList.push({
                  feeYear: detailList.feeYear,
                  feeItemConfigName: list.feeItemConfigName,
                  totalAmount: list.totalAmount,
                  prepaymentDeducted: list.prepaymentDeducted,
                  paidAmount: list.paidAmount,
                  pay_status: pay_status,
                  payMethodName: list.payMethodName,
                  createTime: detailList.createTime,
                });
                that.detailList = arrList;
              }
            }
          });
      }
    },
    /**处理查询请求 将查询参数中的页码重置为1，并调用getList方法获取列表数据*/
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /**重置查询表单并重新执行查询操作 */
    resetQuery() {
      this.date = [];
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        studentName: null,
        idNumber: null,
        collegeId: null,
        modelId: null,
        majorId: null,
        gradeId: null,
        feeYearId: null,
        refundedStatus: null,
        payMethod: null,
        paymentStartTime:null,
        paymentEndTime: null,
      };
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /**处理导出操作*/
    handleExport(options) {
      var data = { ...this.queryParams };
      if (options == 1) {
        this.download(
          "/order/pay/payStudentFeePayment/export",
          data,
          `收费明细.xlsx`
        );
      } else if (options == 2) {
        this.download(
          "/order/pay/payStudentFeePayment/export/detail",
          data,
          `收费支付明细.xlsx`
        );
      }
    },
    /** 处理选择项变化事件  @param options 选择项数组 */
    handleSelectionChange(options) {
      this.ids = options.map((item) => item.id);
    },
  },
};
</script>
<style scoped>
.width_100 {
  width: 100%;
}
.my-label {
  font-weight: bold !important;
}
.my-content {
  font-weight: bold !important;
}
.huizhong {
  width: 100%;
  text-align: left;
  font-size: 14px;
  padding: 20px 0;
}
</style>
